<template>
  <div class="p-6 bg-base-200/50 rounded-2xl">
    <CommentItem
      :comment="comment"
      :replies="replies"
      :show-replies="true"
      @toggle-like="handleToggleLike"
      @create-reply="handleCreateReply"
      @report-comment="handleReportComment"
      @delete-comment="handleDeleteComment"
      @reply-click="handleReplyClick"
    >
      <!-- 自定义更多操作插槽 -->
        <template #more-actions="{ showMore, onToggle, onReport, onDelete }">
        <div class="relative">
          <button
            @click="onToggle"
            class="p-2 rounded-full hover:bg-base-300/50 transition-colors duration-200 opacity-0 group-hover:opacity-100"
          >
            <svg
              class="w-4 h-4 text-base-content/60"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
              ></path>
            </svg>
          </button>

          <div
            v-if="showMore"
            class="absolute right-0 top-10 bg-base-100 rounded-xl shadow-lg border border-base-300/30 py-2 z-10 min-w-[140px]"
          >
            <button
              @click="onReport"
              class="w-full px-4 py-2 text-sm text-base-content/80 hover:bg-base-200/50 flex items-center gap-2"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
                ></path>
              </svg>
              举报
            </button>
            <button
              @click="onDelete"
              class="w-full px-4 py-2 text-sm text-error hover:bg-error/10 flex items-center gap-2"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                ></path>
              </svg>
              删除
            </button>
            <div class="border-t border-base-300/30 my-1"></div>
            <button
              class="w-full px-4 py-2 text-sm text-base-content/80 hover:bg-base-200/50 flex items-center gap-2"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"
                ></path>
              </svg>
              分享
            </button>
            <button
              class="w-full px-4 py-2 text-sm text-base-content/80 hover:bg-base-200/50 flex items-center gap-2"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                ></path>
              </svg>
              收藏
            </button>
          </div>
        </div>
      </template>
    </CommentItem>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CommentItem } from '@/components/common/comment'
import type { Comment } from '@/apis/methods/comment.api'

// 评论数据
const comment = ref<Comment>({
  id: '1',
  content:
    '这个示例展示了自定义更多操作插槽的用法。点击三个点可以看到更多操作选项：举报、删除、分享、收藏。',
  author: {
    id: '1',
    name: '操作专家',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=action',
  },
  createdAt: '2024-01-15T10:30:00Z',
  updatedAt: '2024-01-15T10:30:00Z',
  likes: 8,
  isLiked: false,
  replyCount: 1,
  parentId: undefined,
  articleId: '1',
  mentionedUsers: [],
  status: 'approved',
})

// 回复数据
const replies = ref<Comment[]>([
  {
    id: 'r1',
    content: '操作菜单很丰富！',
    author: {
      id: '2',
      name: '用户',
      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=user',
    },
    createdAt: '2024-01-15T11:00:00Z',
    updatedAt: '2024-01-15T11:00:00Z',
    likes: 1,
    isLiked: false,
    replyCount: 0,
    parentId: '1',
    articleId: '1',
    mentionedUsers: [],
    status: 'approved',
  },
])

// 事件处理函数
const handleToggleLike = (commentId: string) => {
  const targetComment =
    comment.value.id === commentId ? comment.value : replies.value.find((c) => c.id === commentId)
  if (targetComment) {
    targetComment.isLiked = !targetComment.isLiked
    targetComment.likes += targetComment.isLiked ? 1 : -1
  }
}

const handleCreateReply = (parentId: string, content: string) => {
  console.log('创建回复:', { parentId, content })
}

const handleReportComment = (commentId: string) => {
  console.log('举报评论:', commentId)
}

const handleDeleteComment = (commentId: string) => {
  console.log('删除评论:', commentId)
}

// 这些函数在插槽示例中不需要实际使用，但保留用于演示
// const handleAvatarClick = (author: Comment['author']) => {
//   console.log('点击头像:', author)
// }

// const handleAuthorClick = (author: Comment['author']) => {
//   console.log('点击作者:', author)
// }

// const handleContentClick = (comment: Comment) => {
//   console.log('点击内容:', comment)
// }

const handleReplyClick = (reply: Comment) => {
  console.log('点击回复:', reply)
}
</script>

<style scoped>
/* 自定义更多操作样式 */
</style>
